<!-- 历史分层健康度 -->
<template>
  <div class="layerd-old">
    <div class="btns">
      <ul>
        <li><a class="btn" @click="changeData('day')">日</a></li>
        <li><a class="btn" @click="changeData('week')">周</a></li>
        <li><a class="btn" @click="changeData('month')">月</a></li>
        <li><a class="btn" @click="changeData('quarter')">季</a></li>
        <li><a class="btn" @click="changeData('year')">年</a></li>
      </ul>
    </div>
    <div class="layerd-old" ref="layerd_old_ref"></div>
  </div>
</template>

<script>
import { getlayerdOldData } from "@/api/apis";
export default {
  components: {},
  data() {
    return {
      msg: "",
      chartInstance: null, // 图表实例
      allData: null, // 服务端获取的数据
    };
  },
  mounted() {},
  created() {},
  methods: {
    initMoudle() {
      this.initChart();
      this.getData();
    },
    // 初始化图表
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.layerd_old_ref);
      var fontColor = "#30eee9";
      var option = {
        title: {
          text: "历史分层健康度",
          top: "1%",
          left: "1%",
          textStyle: {
            color: "#0092f6",
            fontSize: 12,
          },
        },
        backgroundColor: "#fff",
        grid: {
          left: "1%",
          right: "10%",
          top: "20%",
          bottom: "5%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          orient: "vertical",
          top: "20%",
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              show: true,
              readOnly: false,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: true,
          x: "center",
          y: "35",
          icon: "stack",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#1bb4f6",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: fontColor,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#195384",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#2ad1d2",
              },
            },
            // y轴线
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            // y 轴出来的水平线
            splitLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    async getData() {
      // const { data: ret } = await this.$axios.get(
      //   "/layerd_old_data",{
      //     params:{
      //       // category_by:'day'
      //     }
      //   }
      // );
      let params = {
        group:this.$store.state.groupType,
        code:this.$store.state.civilCode
      }
      getlayerdOldData(params).then((res) => {
        this.allData = res.data;
        this.updateChart();
      });
    },
    updateChart() {
      const legend = Object.keys(this.allData);
      let x = [];
      const datas = [];
      for (let item in this.allData) {
        let items = this.allData[item];
        let obj = {
          name: items[0].name,
          type: "line",
          symbol: "circle",
          symbolSize: 8,
          itemStyle: {
            normal: {
              //   color: "#0092f6",
              lineStyle: {
                // color: "#0092f6",
                width: 1,
              },
            },
          },
          markPoint: {
            itemStyle: {
              normal: {
                color: "red",
              },
            },
          },
          data: items.map((item) => {
            return item.health;
          }),
        };
        datas.push(obj);
      }
      x = this.allData[legend[0]].map((item) => {
        return item.month;
      });
      var option = {
        legend: {
          data: legend,
        }, // 图例
        xAxis: [
          {
            data: x,
          },
        ],
        series: datas,
      };
      this.chartInstance.setOption(option);
    },
    // 切换数据（日、周、月、季、年）
    async changeData(arg) {
      this.$store.commit('setGroupType',arg)
      this.initMoudle()
    },
    screenAdapter() {},
  },
};
</script>

<style scoped>
.layerd-old {
  width: 100%;
  height: 100%;
  position: relative;
}
.btns {
  position: absolute;
  left: 20%;
  top: -10px;
  z-index: 1;
}
.btns li {
  float: left;
  width: 30px;
  line-height: 20px;
  background-color: #67c23a;
  border-color: #67c23a;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  margin: 0 5px;
}
</style>